import router from '@/router'
import store from '@/store'
// 虚拟进度条  NProgress.start()  .done() 结束进度条
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'
import getPageTitle from '@/utils/get-page-title'

// 登录页面 不需要登录就可以访问，
// 白名单 ： 项目里面 不需要token，不需要登录既可以看见的页面  注册页  登录页面  404 等
const whiteList = ['/login', '/404']
// 判断一个元素 在不在 数组里面
//  arr.includes(xxx)    arr.indexOf(xxx) === -1

// 路由守卫， 2个函数---钩子函数， 在进入页面开始的时候自动执行
router.beforeEach(async(to, from, next) => {
  document.title = getPageTitle(to.meta.title)
  NProgress.start()
  const token = store.state.user.token
  // console.log(token)
  // next()
  // 路由跳转判断， 先看有没有登录 （就是看有没有token值）
  if (token) {
    // if (to.path === '/login') {
    if (whiteList.includes(to.path)) {
      // 如果已经登录成功，还要去登录页面，用户体验就不好，应该直接给他跳转到首页
      next('/')
      NProgress.done()
    } else {
      // 这个地方就是 有token，并且访问的是一些需要权限的页面， 代码执行的方法
      // this.$store
      // 这里必须要加await， 因为不加的话，这个代码就不会等请求返回的结果，直接走了next，代码逻辑就不对
      // 正常的逻辑应该是， 等getuserInfo这个接口成功或者失败以后，在才走下面的next()  await会让代码中断，等待

      // 如果获取到了userInfo的数据，就不要再发送请求了 ---- 怎么样知道请求成功了 ---
      // 请求成功做了什么事情？ 将userInfo的数据放到了vuex里面去了， 随便找请求成功后，对象的一个属性，一般用id
      if (!store.state.user.userInfo.id) {
        await store.dispatch('user/getUserInfoAction')
      }

      // 下面代码是 路由通过，放行的时候， 必须是上一步请求成功或者失败，请求完成了，才能走下一步
      next()

      //  await 就是把下面的 .then的语法 给 简写了， 形式上是同步的写法，本质上还是异步，会等待，
      // 和then里面的回调函数 一样
      // store.dispatch('user/getUserInfoAction').then(() => {
      //   next()
      // })
    }
  } else {
    // 没有登录过的逻辑 （用户通过一些地址栏，强行跳转到其他页面，我们应该有个拦截的操作）
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 进入页面以后执行的钩子函数 afterEach
// afterEach 并不一定都会执行， 如果在进入的beforeEach钩子函数里面
// 通过next('参数') 跳转到了其他页面(将正常的跳转方向给他改变了)，这个afterEach就不会执行
router.afterEach(() => {
  NProgress.done()
})

// 请你描述一下路由守卫？
